<div class="page_deer_tip_area alert alert-success-light" style="width: 400px;margin:120px auto;">请将鼠标放在左侧手机内，点击相应板块可以开始编辑</div>
<form  role="form"  method="POST" action="">
    <input type="hidden" id="page-id" name="page-id" value=""/>
    <input type="hidden" id="page-block" name="page-block" value=""/>
    
    
    <div class="deer_block_clear"></div>
    <div class="form-group row deer_design  deer_design_banner">
        <label class="control-label col-xs-12 deer_design_title_banner deer_design_title_slide"><i class="fa fa-bookmark"></i> 顶部Banner</label>
        <div class="col-xs-12">
             <div class="deer-select-slide-box"><button type="button" class="btn btn-danger btn-deer-dialog" data-urlpop="deerhome/design/items?item_type=2&multiple=true"  title="选择商品" ><i class="fa fa-list"></i> {:__('Choose')}商品</button></div>
        </div>
        <div class="col-xs-12" id="mall_items_list"></div>
        <textarea   class="form-control hidden" id="mall_data_json" style="margin-top:5px;">{php}echo json_encode($pageData['banner'],JSON_UNESCAPED_UNICODE);{/php}</textarea>
    </div>

    <div class="deer_block_clear"></div>
    <div class="form-group row deer_design"  id="deer_sub_box">
        <label class="control-label col-xs-12"></label>
        <div class="col-xs-12">
            <button type="submit" style="width: 200px;" class="btn btn-success ">保 存</button>
        </div>
    </div>
</form>

<style>

    .product-container {
        width: 100%;
        max-width: 400px;
        margin: 10px;
        float: left;
        border: 1px solid #eee;
        border-radius: 5px;
        overflow: hidden;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    
    .product-preview {
        position: relative;
        width: 100%;
        height: 200px;
        overflow: hidden;
    }
    
    .product-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .product-delete-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 30px;
        height: 30px;
        background: rgba(255, 0, 0, 0.7);
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        box-shadow: 0 1px 3px rgba(0,0,0,0.3);
        transition: all 0.2s ease;
    }
    
    .product-delete-btn:hover {
        background: rgba(255, 0, 0, 0.9);
        transform: scale(1.1);
        color: #fff;
        text-decoration: none;
    }
    
    .product-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,0.7);
        color: #fff;
        padding: 10px;
    }
    
    .product-name {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .product-price {
        color: #ff6b6b;
        font-size: 18px;
        font-weight: bold;
    }
    
    .product-inputs {
        padding: 15px;
        background: #f9f9f9;
    }
    
    .mb-2 {
        margin-bottom: 10px;
    }
</style>
<!--这里自定义图片预览的模板 开始-->
<script type="text/html" id="malltpl">
    <%for(var i=0;i < list.length;i++){%>
    <div class="product-container">
        <div class="product-preview">
            <img src="<%=list[i].img%>" class="product-image">
            <a href="javascript:;" class="product-delete-btn" data-index="<%=i%>"><i class="fa fa-times"></i></a>
            <div class="product-overlay">
                <div class="product-name"><%=list[i].name%></div>
                <div class="product-price">¥<%=list[i].price%></div>
            </div>
        </div>
        <div class="product-inputs">
            <div class="input-group mb-2">
                <span class="input-group-addon">大标题</span>
                <input type="text" class="form-control" maxlength="10" name="row[banner][<%=i%>][title]" value="<%=list[i].title%>" placeholder="请输入">
            </div>
            <div class="input-group">
                <span class="input-group-addon">子描述</span>
                <input type="text" class="form-control" maxlength="10" name="row[banner][<%=i%>][desc]" value="<%=list[i].desc%>" placeholder="请输入">
            </div>
        </div>
        <input type="hidden" class="form-control" name="row[banner][<%=i%>][id]" value="<%=list[i].id%>" >
        <input type="hidden" class="form-control" name="row[banner][<%=i%>][name]" value="<%=list[i].name%>" >
        <input type="hidden" class="form-control" name="row[banner][<%=i%>][price]" value="<%=list[i].price%>" >
        <input type="hidden" class="form-control" name="row[banner][<%=i%>][img]" value="<%=list[i].img%>" >
        <input type="hidden" class="form-control" name="row[banner][<%=i%>][link]" value="/pages/productDetail/productDetail?id=<%=list[i].id%>" >
     </div>
    <%}%>
</script>
<!--这里自定义图片预览的模板 结束-->
    